import React, { createContext, useContext, useState, useEffect } from 'react';
import type { ReactNode } from 'react';
import { ConfigProvider, theme as antdTheme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { themes, lightTheme, getThemeByKey, type CustomTheme } from '../config/themes';
import { resetNotificationConfig } from '../config/notification';
import { storage, STORAGE_KEYS } from '../utils';

interface ThemeContextType {
  currentTheme: CustomTheme;
  themes: CustomTheme[];
  changeTheme: (themeKey: string) => void;
  isDark: boolean;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  // 从本地存储获取主题，默认为 lightTheme
  const [currentTheme, setCurrentTheme] = useState<CustomTheme>(() => {
    const savedThemeKey = storage.get(STORAGE_KEYS.THEME);
    return savedThemeKey ? getThemeByKey(savedThemeKey) : lightTheme;
  });

  const changeTheme = (themeKey: string) => {
    const newTheme = getThemeByKey(themeKey);
    setCurrentTheme(newTheme);
    storage.set(STORAGE_KEYS.THEME, themeKey);

    // 移除所有主题类
    document.documentElement.classList.remove('dark-theme', 'purple-theme', 'green-theme', 'light-theme', 'tech-theme');
    document.body.classList.remove('dark-theme', 'purple-theme', 'green-theme', 'light-theme', 'tech-theme');

    // 添加对应的主题类
    if (themeKey === 'dark') {
      document.documentElement.classList.add('dark-theme');
      document.body.classList.add('dark-theme');
    } else if (themeKey === 'tech') {
      document.documentElement.classList.add('tech-theme');
      document.body.classList.add('tech-theme');
    } else if (themeKey === 'purple') {
      document.documentElement.classList.add('purple-theme');
      document.body.classList.add('purple-theme');
    } else if (themeKey === 'green') {
      document.documentElement.classList.add('green-theme');
      document.body.classList.add('green-theme');
    } else if (themeKey === 'light') {
      document.documentElement.classList.add('light-theme');
      document.body.classList.add('light-theme');
    }

    // 添加主题特定的字体类
    document.body.className = document.body.className.replace(/theme-font-\w+/g, '');
    document.body.classList.add(`theme-font-${themeKey}`);
  };

  // 初始化时设置 html 和 body class
  useEffect(() => {
    // 移除所有主题类
    document.documentElement.classList.remove('dark-theme', 'purple-theme', 'green-theme', 'light-theme', 'tech-theme');
    document.body.classList.remove('dark-theme', 'purple-theme', 'green-theme', 'light-theme', 'tech-theme');

    // 添加对应的主题类
    if (currentTheme.key === 'dark') {
      document.documentElement.classList.add('dark-theme');
      document.body.classList.add('dark-theme');
    } else if (currentTheme.key === 'tech') {
      document.documentElement.classList.add('tech-theme');
      document.body.classList.add('tech-theme');
    } else if (currentTheme.key === 'purple') {
      document.documentElement.classList.add('purple-theme');
      document.body.classList.add('purple-theme');
    } else if (currentTheme.key === 'green') {
      document.documentElement.classList.add('green-theme');
      document.body.classList.add('green-theme');
    } else if (currentTheme.key === 'light') {
      document.documentElement.classList.add('light-theme');
      document.body.classList.add('light-theme');
    }

    // 添加主题特定的字体类
    document.body.className = document.body.className.replace(/theme-font-\w+/g, '');
    document.body.classList.add(`theme-font-${currentTheme.key}`);

    // 重置通知配置
    resetNotificationConfig();
  }, [currentTheme.key, currentTheme.isDark]);

  // 处理深色主题的算法
  const getThemeConfig = () => {
    const config = { ...currentTheme.config };
    
    if (currentTheme.isDark) {
      config.algorithm = antdTheme.darkAlgorithm;
    }
    
    return config;
  };

  const contextValue: ThemeContextType = {
    currentTheme,
    themes,
    changeTheme,
    isDark: currentTheme.isDark || false,
  };

  return (
    <ThemeContext.Provider value={contextValue}>
      <ConfigProvider 
        locale={zhCN} 
        theme={getThemeConfig()}
      >
        {children}
      </ConfigProvider>
    </ThemeContext.Provider>
  );
};
